export const myVueplugin = (app: any) => {
  // 水印
  app.directive("watermark", {
    //
    mounted(_el: any, binding: any) {
      // 生成水印容器
      const watermark = document.createElement("div");
      // 设置默认水印内容
      const text = binding.value || "内部文件 禁止外传";
      // 将汉字转换为 文字图片
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      if (!ctx) return;
      // 设置 canvas 尺寸（根据文字长度和样式调整）
      const fontSize = 24;
      const rotateDeg = -30; // 旋转角度（与原文字效果一致）
      ctx.font = `${fontSize}px sans-serif`; // 设置字体
      const textWidth = ctx.measureText(text).width;
      const textHeight = fontSize;
      const canvasSize = Math.max(textWidth, textHeight) * 2; // 扩大画布避免旋转后截断
      canvas.width = canvasSize;
      canvas.height = canvasSize;
      ctx.translate(canvasSize / 2, canvasSize / 2); // 移动到中心
      ctx.rotate((rotateDeg * Math.PI) / 180); // 旋转角度
      ctx.fillStyle = "rgba(0, 0, 0, 0.1)"; // 文字颜色（与原效果一致）
      ctx.font = `${fontSize}px sans-serif`;
      ctx.fillText(text, -textWidth / 2, textHeight / 2); // 居中绘制

      // 2. 将 canvas 转换为图片 data URL
      const textImageUrl = canvas.toDataURL("image/png");

      // 设置水印样式
      const style = `
        position: fixed;
        top: 0;
        left: 200px;
        width: 100vw;
        height: 100vh;
        pointer-events: none;
        z-index: 9999;
        background-image:url(${textImageUrl});
        background-size:${canvasSize}px;
        background-repeat:repeat;
        background-position:20px 20px;
          `;
      watermark.setAttribute("style", style);
      // 将水印添加到页面
      document.body.appendChild(watermark);
    },
    // ty
    unmounted(_el: any, _binding: any) {
      // 销毁水印
      const watermarks = document.querySelectorAll(
        'div[style*="z-index: 9999"]'
      );
      watermarks.forEach((mark) => mark.remove());
    },
  });
};